<%--
  Created by IntelliJ IDEA.
  User: TianyuChen
  Date: 2020/3/27
  Time: 17:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>ego-portal show</title>
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            // 索引初始格式
            var index = 0;
            var length = ${pictures.size()}-1;
            $(".adinx").css("background","red");
            $(".adinx").eq(index).css("background", "green");

            // 图像初始加载时布局
            $(".adpic").each(function (i,n) {
                $(n).css("left",400*i+"px");
            });

            // 按钮触发广告图轮转
            // $("button").click(function () {
            //     $(".adpic").each(function (i,n) {
            //         // $(n).css("left",parseInt($(n).css("left"))-400+"px");  // 每次点击按钮每个图片左移400px
            //         $(n).animate({left:parseInt($(n).css("left"))-400+"px"},1000,function () {
            //             if(i==0){
            //                 var $newImg = $(n).clone();
            //                 $(n).remove();
            //                 $newImg.css("left", "800px");
            //                 $("#addiv").append($newImg);
            //             }
            //         });
            //     });
            // });

            // 定时触发广告图轮转
            setInterval(function () {
                $(".adpic").each(function (i,n) {
                    // $(n).css("left",parseInt($(n).css("left"))-400+"px");  // 每次点击按钮每个图片左移400px
                    $(n).animate({left:parseInt($(n).css("left"))-400+"px"},1000,function () {
                        if(i==0){
                            var $newImg = $(n).clone();
                            $(n).remove();
                            $newImg.css("left", 400*length+"px");
                            $("#addiv").append($newImg);
                        }
                    });
                });

                // 将当前对应索引设置为绿色
                index++;
                if(index>length){
                    index=0;
                }
                $(".adinx").css("background","red");
                $(".adinx").eq(index).css("background","green");
            },3000)

        });
    </script>
</head>
<body>
<%--    <button>按钮</button>--%>

    <%-- 图像 --%>
    <div id="addiv" style="width:400px; height:200px;border:1px solid black; margin-left:100px; position:absolute; overflow: hidden">
        <c:forEach items="${pictures}" var="picture" >
            <img class="adpic" src="http://localhost/ego_management/files/${picture.path}" width="400" height="200" style="position:absolute;left:0px; top:0px";/>
        </c:forEach>
    </div>

    <%-- 索引 --%>
    <div style="color:blue; position:absolute; left:280px; top:180px";>
        <c:forEach begin="1" end="${pictures.size()}" var="step">
            <span class="adinx">${step}</span>
        </c:forEach>
    </div>

</body>
</html>
